<template>
  <div>
    <!--<a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onChange" />-->
    <!--<a-tree-->
      <!--@expand="onExpand"-->
      <!--:expandedKeys="expandedKeys"-->
      <!--:autoExpandParent="autoExpandParent"-->
      <!--:treeData="treeData"-->
    <!--&gt;-->
      <!--<template slot="title" slot-scope="{title, workorders}">-->
        <!--<span v-if="title.toUpperCase().indexOf(searchValue.toUpperCase()) > -1">-->
          <!--{{title.substr(0, title.toUpperCase().indexOf(searchValue.toUpperCase()))}}-->
          <!--<span style="color: #f50">{{searchValue.toUpperCase()}}</span>-->
          <!--{{choiced(title)}}-->
        <!--</span>-->
        <!--<span v-else>{{title}}</span>-->
        <!--<div style="line-height: 12px;font-size: 12px" v-if="workorders" :key="index" v-for="(workorder, index) in workorders">-->
          <!--<div @click="selectNode(workorder)">-->
            <!--<span style="color: #f50" v-if="workorder.number.toUpperCase().indexOf(searchValue.toUpperCase()) > -1&&searchValue!==''">-->
              <!--{{workorder.number}}-->
            <!--</span>-->
            <!--<span v-else>{{workorder.number}}</span>-->
          <!--</div>-->
        <!--</div>-->
      <!--</template>-->
    <!--</a-tree>-->
  </div>
</template>

<script>
import getParentKey from './uitl';

export default {
  data () {
    return {
      expandedKeys: [],
      searchValue: '',
      autoExpandParent: true,
      dataList: []
    }
  },
  computed: {
    treeData() {
      return this.$store.state.tree.treeData
    },
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    selectNode(workorder) {
    },
    getDataList() {
      const dataList = []
      const generateList = (data) => {
        data.map(node => {
          dataList.push({key: node.key, title: node.title, workorders: node.workorders})
          if (node.children) {
            generateList(node.children, node.key)
          }
        })
      }
      generateList(this.treeData)
      this.dataList = dataList
    },
    choiced(value) {
      return value.substr(value.toUpperCase().indexOf(this.searchValue.toUpperCase()) + this.searchValue.length)
    },
    onExpand  (expandedKeys) {
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onChange (e) {
      const value = e.target.value
      const expandedKeys = this.dataList.map((item) => {
        if (item.key.toUpperCase().indexOf(value.toUpperCase()) > -1) {
          return getParentKey(item.key, this.treeData)
        }
        return null
      }).filter((item, i, self) => {
        return this.getMatched(item, i, self)
      })
      Object.assign(this, {
        expandedKeys,
        searchValue: value,
        autoExpandParent: true,
      })
    },
    getMatched (item, i, self) {
      return item && self.indexOf(item) === i
    },
  },
}
</script>
